import React from "react";
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
import { Activity, TrendingUp } from "lucide-react";

interface HealthTrendsProps {
  data: {
    date: string;
    value: number;
  }[];
  type: "weight" | "bloodPressure" | "heartRate" | "sleepQuality";
  unit: string;
}

export function HealthTrends({ data, type, unit }: HealthTrendsProps) {
  const getTitle = () => {
    switch (type) {
      case "weight": return "体重趋势";
      case "bloodPressure": return "血压趋势";
      case "heartRate": return "心率趋势";
      case "sleepQuality": return "睡眠趋势";
    }
  };

  // 格式化X轴显示
  const formatXAxis = (dateStr: string) => {
    const date = new Date(dateStr);
    if (type === "heartRate") {
      return date.toLocaleTimeString('zh-CN', {
        hour: '2-digit',
        minute: '2-digit',
        hour12: false
      });
    }
    return date.toLocaleDateString('zh-CN', {
      month: 'numeric',
      day: 'numeric'
    });
  };

  // 自定义提示框
  const CustomTooltip = ({ active, payload, label }: any) => {
    if (active && payload && payload.length) {
      return (
        <div className="bg-card p-3 rounded-lg shadow-lg border">
          <p className="text-sm text-muted-foreground mb-1">
            {type === "heartRate" 
              ? new Date(label).toLocaleTimeString('zh-CN')
              : new Date(label).toLocaleDateString('zh-CN')
            }
          </p>
          <div className="flex items-center gap-2">
            <span className="text-primary font-medium">
              {payload[0].value} {unit}
            </span>
          </div>
        </div>
      );
    }
    return null;
  };

  return (
    <div className="bg-card rounded-xl p-6 shadow-lg">
      <div className="flex items-center justify-between mb-6">
        <div className="flex items-center gap-2">
          <TrendingUp className="w-5 h-5 text-primary" />
          <h3 className="font-bold text-lg">{getTitle()}</h3>
        </div>
        <div className="text-sm text-muted-foreground">
          {type === "heartRate" ? "今日" : "最近30天"}
        </div>
      </div>
      
      <div className="h-[300px]">
        <ResponsiveContainer width="100%" height="100%">
          <LineChart data={data} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
            <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
            <XAxis 
              dataKey="date" 
              tickFormatter={formatXAxis}
              interval="preserveStartEnd"
              minTickGap={50}
              className="text-xs"
            />
            <YAxis 
              unit={unit} 
              className="text-xs"
              domain={['auto', 'auto']}
            />
            <Tooltip content={<CustomTooltip />} />
            <Line
              type="monotone"
              dataKey="value"
              stroke="hsl(var(--primary))"
              strokeWidth={2}
              dot={{ fill: "hsl(var(--primary))", r: 3 }}
              activeDot={{ r: 5, fill: "hsl(var(--primary))" }}
            />
          </LineChart>
        </ResponsiveContainer>
      </div>
    </div>
  );
} 